<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TipTap 测试 Demo</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            flex-wrap: wrap;
        }
        
        .toolbar button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .toolbar button:hover {
            background: #e9ecef;
        }
        
        .toolbar button.is-active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        
        .ProseMirror {
            border: 2px solid #e9ecef;
            border-radius: 6px;
            padding: 16px;
            min-height: 200px;
            outline: none;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .ProseMirror:focus {
            border-color: #007bff;
        }
        
        .debug-panel {
            margin-top: 20px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 6px;
            border-left: 4px solid #007bff;
        }
        
        .debug-panel h3 {
            margin-top: 0;
            color: #495057;
        }
        
        .debug-content {
            background: white;
            padding: 12px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .info-section {
            margin-top: 20px;
            padding: 16px;
            background: #e7f3ff;
            border-radius: 6px;
        }
        
        .info-section h3 {
            margin-top: 0;
            color: #0056b3;
        }
        
        .info-section code {
            background: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Monaco', 'Menlo', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 TipTap 测试 Demo</h1>
        
        <div class="toolbar">
            <button id="bold-btn">粗体</button>
            <button id="italic-btn">斜体</button>
            <button id="strike-btn">删除线</button>
            <button id="code-btn">代码</button>
            <button id="h1-btn">标题1</button>
            <button id="h2-btn">标题2</button>
            <button id="paragraph-btn">段落</button>
            <button id="blockquote-btn">引用</button>
            <button id="bullet-list-btn">无序列表</button>
            <button id="ordered-list-btn">有序列表</button>
            <button id="undo-btn">撤销</button>
            <button id="redo-btn">重做</button>
        </div>
        
        <div id="editor"></div>
        
        <div class="debug-panel">
            <h3>🔍 调试信息</h3>
            <div>
                <strong>HTML 输出:</strong>
                <div id="html-output" class="debug-content"></div>
            </div>
            <div style="margin-top: 12px;">
                <strong>JSON 输出:</strong>
                <div id="json-output" class="debug-content"></div>
            </div>
        </div>
        
        <div class="info-section">
            <h3>📖 访问 ProseMirror 原始对象</h3>
            <p>在浏览器控制台中，你可以通过以下方式访问 ProseMirror 的原始对象：</p>
            <ul>
                <li><code>window.editor.view</code> - EditorView 实例</li>
                <li><code>window.editor.state</code> - EditorState 实例</li>
                <li><code>window.editor.schema</code> - Schema 实例</li>
                <li><code>window.editor.state.doc</code> - 文档 Node 树</li>
                <li><code>window.editor.state.selection</code> - 当前选区</li>
            </ul>
            <p>打开浏览器开发者工具，在控制台中输入这些命令来探索 ProseMirror 的内部结构！</p>
        </div>
    </div>

    <!-- 使用 ES 模块方式引入 TipTap -->
    <script type="module">
        // 从 CDN 导入 TipTap
        import { Editor } from 'https://esm.sh/@tiptap/core@2.1.13'
        import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.1.13'

        // 创建 TipTap 编辑器
        const editor = new Editor({
            element: document.querySelector('#editor'),
            extensions: [
                StarterKit,
            ],
            content: `
                <h1>欢迎使用 TipTap!</h1>
                <p>这是一个简单的 <strong>TipTap</strong> 测试环境。你可以：</p>
                <ul>
                    <li>使用工具栏按钮进行格式化</li>
                    <li>在控制台中访问 ProseMirror 原始对象</li>
                    <li>查看实时的 HTML 和 JSON 输出</li>
                </ul>
                <blockquote>
                    <p>💡 提示：打开浏览器开发者工具，输入 <code>window.editor</code> 来探索编辑器对象！</p>
                </blockquote>
            `,
            onUpdate: ({ editor }) => {
                updateDebugInfo();
                updateToolbarState();
            },
            onSelectionUpdate: ({ editor }) => {
                updateToolbarState();
            }
        });

        // 将编辑器实例暴露到全局，方便在控制台中访问
        window.editor = editor;

        // 工具栏按钮事件
        document.getElementById('bold-btn').addEventListener('click', () => {
            editor.chain().focus().toggleBold().run();
        });

        document.getElementById('italic-btn').addEventListener('click', () => {
            editor.chain().focus().toggleItalic().run();
        });

        document.getElementById('strike-btn').addEventListener('click', () => {
            editor.chain().focus().toggleStrike().run();
        });

        document.getElementById('code-btn').addEventListener('click', () => {
            editor.chain().focus().toggleCode().run();
        });

        document.getElementById('h1-btn').addEventListener('click', () => {
            editor.chain().focus().toggleHeading({ level: 1 }).run();
        });

        document.getElementById('h2-btn').addEventListener('click', () => {
            editor.chain().focus().toggleHeading({ level: 2 }).run();
        });

        document.getElementById('paragraph-btn').addEventListener('click', () => {
            editor.chain().focus().setParagraph().run();
        });

        document.getElementById('blockquote-btn').addEventListener('click', () => {
            editor.chain().focus().toggleBlockquote().run();
        });

        document.getElementById('bullet-list-btn').addEventListener('click', () => {
            editor.chain().focus().toggleBulletList().run();
        });

        document.getElementById('ordered-list-btn').addEventListener('click', () => {
            editor.chain().focus().toggleOrderedList().run();
        });

        document.getElementById('undo-btn').addEventListener('click', () => {
            editor.chain().focus().undo().run();
        });

        document.getElementById('redo-btn').addEventListener('click', () => {
            editor.chain().focus().redo().run();
        });

        // 更新调试信息
        function updateDebugInfo() {
            const htmlOutput = document.getElementById('html-output');
            const jsonOutput = document.getElementById('json-output');
            
            htmlOutput.textContent = editor.getHTML();
            jsonOutput.textContent = JSON.stringify(editor.getJSON(), null, 2);
        }

        // 更新工具栏状态
        function updateToolbarState() {
            const buttons = {
                'bold-btn': editor.isActive('bold'),
                'italic-btn': editor.isActive('italic'),
                'strike-btn': editor.isActive('strike'),
                'code-btn': editor.isActive('code'),
                'h1-btn': editor.isActive('heading', { level: 1 }),
                'h2-btn': editor.isActive('heading', { level: 2 }),
                'blockquote-btn': editor.isActive('blockquote'),
                'bullet-list-btn': editor.isActive('bulletList'),
                'ordered-list-btn': editor.isActive('orderedList'),
            };

            Object.entries(buttons).forEach(([id, isActive]) => {
                const button = document.getElementById(id);
                if (isActive) {
                    button.classList.add('is-active');
                } else {
                    button.classList.remove('is-active');
                }
            });
        }

        // 初始化调试信息
        updateDebugInfo();
        updateToolbarState();

        // 在控制台中输出一些有用的信息
        console.log('🚀 TipTap Demo 已加载！');
        console.log('📝 编辑器实例:', window.editor);
        console.log('🔍 ProseMirror View:', window.editor.view);
        console.log('📊 ProseMirror State:', window.editor.state);
        console.log('📋 Schema:', window.editor.schema);
        console.log('');
        console.log('💡 尝试这些命令:');
        console.log('   window.editor.state.doc - 查看文档树');
        console.log('   window.editor.state.selection - 查看当前选区');
        console.log('   window.editor.schema.nodes - 查看所有节点类型');
        console.log('   window.editor.schema.marks - 查看所有标记类型');
    </script>
</body>
</html>